<template>
  <!-- 用户购买数据滚屏 -->
  <div class="UserPurchaseDatacontent">
    <div class="bigBox">
      <div class="msgtitle">
        <span class="msgSpanTitle">序号</span>
        <span class="msgSpanTitle">门店名称</span>
        <span class="msgSpanTitle">商品名称</span>
        <span class="msgSpanTitle">销售数量</span>
        <span class="msgSpanTitle">当前库存</span>
      </div>
      <div class="msgScroll">
        <vueSeamlessScroll ref="msgListRef" :data="msgList" :class-option="classOption">
          <div v-for="(item, index) in msgList" :key="index" class="msgScrollItem">
            <span class="msgSpanItem">{{ index + 1 }}</span>
            <span class="msgSpanItem">{{ item.storeName }}</span>
            <span class="msgSpanItem">{{ item.commodityName }}</span>
            <span class="msgSpanItem">{{ item.commodityNum }}</span>
            <span class="msgSpanItem">{{ item.stockNum }}</span>
          </div>
        </vueSeamlessScroll>
      </div>
    </div>
  </div>
</template>

<script>
import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import { getCategorySellList } from "@/api/user";
// import { rsaDecrypt } from '@/utils/commonutils3'
import { getSid, removeToken } from "@/utils/auth";
export default {
  name: "UserPurchaseData",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      msgList: [],
      classOption: {
        step: 0.3,
        limitMoveNum: 8,
      },
      msgLists: [],
    };
  },
  created() {
    this.getCategorySellList();
  },
  mounted() {
    if (getSid()) {
      connectWebsocket(
        // 地址
        // 'ws://192.168.3.18:9105/websocket/' + getSid(),
        // 'ws://8.141.7.66:9105/websocket/' + getSid(),
        // "ws://192.168.3.17:9105/websocket/" + getSid(),
        // "ws://test.yukukeji.com/ws/erp/websocket/" + getSid(),
        process.env.VUE_APP_WEBSOCKET_URL1 + getSid(),
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (res) => {
          console.log(res, '拿到结果')
          const datas = JSON.parse(res);
          const resultArr = datas.supplyChainWebsocket;
          console.log(datas, resultArr, "解析后结果");
          // console.log(datas, '返回结果，拿到之后该干啥干啥吧！')
          this.msgLists.splice(0, 0, ...resultArr);
          console.log('this.msgLists', this.msgLists);
          // return
          this.msgList = [];
          // this.msgList.push(...newArr.slice(0, 19))
          let j = this.msgLists.length >= 20 ? 20 : this.msgLists.length;
          for (let i = 0; i < j; i++) {
            if (this.msgLists[i].commodityName.length > 8) {
              this.msgLists[i].commodityName =
                this.msgLists[i].commodityName.substring(0, 8) + "...";
            }
            this.msgList.push(this.msgLists[i]);
            this.$refs.msgListRef.reset();
          }
          //if (datas?.supplyChainWebsocket) {
          // this.changeScroll(datas.supplyChainWebsocket)
          // }
          console.log(this.msgLists, "截取之前");
          console.log(this.msgList, "截取之后");
        },
        // websocket连接失败的回调函数
        (res) => {
          // console.log('失败的回调函数')
          console.log(res, "失败");
        }
      );
    } else {
      removeToken();
    }
  },
  // beforeDestroy() {
  //   closeWebsocket();
  // },
  methods: {
    // changeScroll(supplyChainWebsocket) {

    //   const resultArr = supplyChainWebsocket;
    //   console.log(resultArr, "拿到结果数组");
    //   // console.log(datas, '返回结果，拿到之后该干啥干啥吧！')
    //   this.msgLists.splice(0, 0, ...resultArr);
    //   this.msgList = [];
    //   // this.msgList.push(...newArr.slice(0, 19))
    //   for (let i = 0; i < 20; i++) {
    //     if (this.msgLists[i].commodityName.length > 8) {
    //       this.msgLists[i].commodityName =
    //         this.msgLists[i].commodityName.substring(0, 8) + "...";
    //     }
    //     this.msgList.push(this.msgLists[i]);
    //     this.$refs.msgListRef.reset();
    //   }
    //   console.log(this.msgLists, "截取之前");
    //   console.log(this.msgList, "截取之后");
    // },
    async getCategorySellList() {
      const res = await getCategorySellList();
      if (res.code === 200) {
        const data = res.data;
        console.log(data, "data");
        res.data.list.forEach((item) => {
          if (item.commodityName.length > 8) {
            item.commodityName =
              item.commodityName.substring(0, 8) + "...";
          }
        });
        this.msgList = data.list;
        this.msgLists = data.list;
      } else {
        console.log(res.message);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.UserPurchaseDatacontent {
  color: aliceblue;
  padding: 0.151rem 0.1276rem 0.1302rem;

  .bigBox {
    width: 2.3229rem;
    height: 0.9219rem;
    border: 1px solid #2b7cb5;
    overflow: hidden;

    .msgtitle {
      font-size: 0.0469rem;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 0px 0.0469rem #7586de;
      height: 0.1042rem;
      background-color: RGBA(4, 37, 98, 1);
      display: flex;

      .msgSpanTitle {
        width: 25%;
        text-align: center;
        line-height: 0.1042rem;
        border-bottom: 1px solid rgba(12, 112, 189, 1);
      }
    }

    .msgScroll {
      height: 0.8333rem;
      overflow: hidden;
      font-size: 0.0417rem;
      font-weight: 500;
      color: #bdd1ff;
      text-shadow: 0px 0px 0.0417rem #7586de;

      .msgScrollItem {
        height: 0.1042rem;
        display: flex;
        background-color: RGBA(1, 3, 56, 1);
        border-bottom: 1px solid rgba(12, 112, 189, 1);

        .msgSpanItem {
          width: 25%;
          text-align: center;
          line-height: 0.1042rem;
        }
      }

      .msgScrollItem:nth-child(2n) {
        background-color: RGBA(2, 14, 70, 1);
      }
    }
  }
}
</style>
